<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>图书馆后台 </title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="assets/vendors/feather/feather.css">
    <link rel="stylesheet" href="assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="assets/vendors/ti-icons/css/themify-icons.css">
    <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/vendors/typicons/typicons.css">
    <link rel="stylesheet" href="assets/vendors/simple-line-icons/css/simple-line-icons.css">
    <link rel="stylesheet" href="assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <link rel="stylesheet" href="assets/vendors/datatables.net-bs4/dataTables.bootstrap4.css">
    <link rel="stylesheet" type="text/css" href="assets/js/select.dataTables.min.css">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="assets/images/favicon.png" />
  </head>
  <body class="with-welcome-text">
    <div class="container-scroller">
      
      <!-- partial:partials/_navbar.html -->
      <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex align-items-top flex-row">
        <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
          <div class="me-3">
            <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-bs-toggle="minimize">
              <span class="icon-menu"></span>
            </button>
          </div>
          <div>
            <a class="navbar-brand brand-logo" href="index.html">
              <h2 class="name">图书馆后台</h2>
            </a>
            <a class="navbar-brand brand-logo-mini" href="index.html">
              <img src="assets/images/logo-mini.svg" alt="logo" />
            </a>
          </div>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-top">
          <ul class="navbar-nav">
            <li class="nav-item fw-semibold d-none d-lg-block ms-0">
              <h1 class="welcome-text">早上好， <span class="text-black fw-bold">李唯戬！</span></h1>
              <h3 class="welcome-sub-text">帅b你又上号了</h3>
            </li>
          </ul>
          <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-bs-toggle="offcanvas">
            <span class="mdi mdi-menu"></span>
          </button>
        </div>
      </nav>
      <!-- partial -->
      <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <nav class="sidebar sidebar-offcanvas " id="sidebar">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="index.html">
                <i class="mdi mdi-grid-large menu-icon"></i>
                <span class="menu-title">可视化大屏</span>
              </a>
            </li>
            <li class="nav-item nav-category">导航栏</li>
            <li class="nav-item">
              <a class="nav-link" data-bs-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
                <i class="menu-icon mdi mdi-floor-plan"></i>
                <span class="menu-title">图书管理</span>
                <i class="menu-arrow"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-bs-toggle="collapse" href="#form-elements" aria-expanded="false" aria-controls="form-elements">
                <i class="menu-icon mdi mdi-card-text-outline"></i>
                <span class="menu-title">用户管理</span>
                <i class="menu-arrow"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-bs-toggle="collapse" href="#charts" aria-expanded="false" aria-controls="charts">
                <i class="menu-icon mdi mdi-chart-line"></i>
                <span class="menu-title">借阅信息</span>
                <i class="menu-arrow"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-bs-toggle="collapse" href="#tables" aria-expanded="false" aria-controls="tables">
                <i class="menu-icon mdi mdi-table"></i>
                <span class="menu-title">发布通知</span>
                <i class="menu-arrow"></i>
              </a>
            </li>
          </ul>
        </nav>
        <!-- partial -->
        <div class="main-panel">
          <div class="content-wrapper">
            <div class="row">
              <div class="col-lg-12 grid-margin stretch-card">
                  <div class="card">
                    <div class="card-body">
                      <h2 class="card-title">图书借阅情况分析</h2>
                      <div class="row">
                        <div class="col-lg-4">
                          <div class="container">
                            <div class="row justify-content-center">
                              <div class="col-md-6">
                                <div class="dropdown text-center">
                                  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    请选择图书
                                  </button>
                                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                    <a class="dropdown-item" href="#">请选择图书</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item getinfo" href="#">三体</a>
                                    <a class="dropdown-item getinfo" href="#">从头开始学音乐</a>
                                    <a class="dropdown-item getinfo" href="#">史记</a>
                                    <a class="dropdown-item getinfo" href="#">存在与时间</a>
                                    <a class="dropdown-item getinfo" href="#">戏剧艺术</a>
                                    <a class="dropdown-item getinfo" href="#">斗罗大陆</a>
                                    <a class="dropdown-item getinfo" href="#">机器人系列</a>
                                    <a class="dropdown-item getinfo" href="#">校花的贴身高手</a>
                                    <a class="dropdown-item getinfo" href="#">论语</a>
                                    <a class="dropdown-item getinfo" href="#">资治通鉴</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                        
                            <div class="row justify-content-center mt-4">
                              <div class="col-md-6 text-center">
                                <h4>已借出：<span id="borrowed">loading...</span> 本</h4>
                                <h4>已归还：<span id="returned">loading...</span> 本</h4>
                              </div>
                            </div>
                          </div>
                        </div>  
                        <div class="col-lg-8">
                          <div class="doughnutjs-wrapper d-flex justify-content-center">
                            <canvas id="borrowinformation" style="height: 240px; display: block; box-sizing: border-box; width: 240px;" width="360" height="360">
                              
                            </canvas>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-6 grid-margin stretch-card">
                <div class="card">
                  <div class="card-body">
                    <h4 class="card-title">最受欢迎图书TOP5</h4>
                    <div class="table-responsive pt-3">
                      <table class="table table-bordered">
                        <thead>
                        <tr>
                          <th> 排名 </th>
                          <th> 书名 </th>
                          <th> 借阅次数 </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="table-info">
                          <td> 1 </td>
                          <td id="book_1"> loding... </td>
                          <td id="bcount_1"> loding... </td>
                        </tr>
                        <tr class="table-warning">
                          <td> 2 </td>
                          <td id="book_2"> loding... </td>
                          <td id="bcount_2"> loding... </td>
                        </tr>
                        <tr class="table-danger">
                          <td> 3 </td>
                          <td id="book_3"> loding... </td>
                          <td id="bcount_3"> loding... </td>
                        </tr>
                        <tr class="table-success">
                          <td> 4 </td>
                          <td id="book_4"> loding... </td>
                          <td id="bcount_4"> loding...</td>
                        </tr>
                        <tr class="table-danger">
                          <td> 5 </td>
                          <td id="book_5"> loding... </td>
                          <td id="bcount_5"> loding... </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-6 grid-margin stretch-card">
                <div class="card">
                  <div class="card-body">
                    <h4 class="card-title">最受欢迎类别TOP3</h4>
                    <div class="table-responsive pt-3">
                      <table class="table table-bordered">
                        <thead>
                        <tr>
                          <th> 排名 </th>
                          <th> 类别 </th>
                          <th> 借阅次数 </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="table-info">
                          <td> 1 </td>
                          <td id="type_1"> loding... </td>
                          <td id="tcount_1"> loding... </td>
                        </tr>
                        <tr class="table-warning">
                          <td> 2 </td>
                          <td id="type_2"> loding... </td>
                          <td id="tcount_2"> loding... </td>
                        </tr>
                        <tr class="table-danger">
                          <td> 3 </td>
                          <td id="type_3"> loding... </td>
                          <td id="tcount_3"> loding... </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-6 grid-margin grid-margin-lg-0 stretch-card">
                <div class="card">
                  <div class="card-body">
                    <h4 class="card-title">借阅周期分析</h4>
                    <div class="doughnutjs-wrapper d-flex justify-content-center">
                      <canvas id="duration" style="height: 250px !important;"></canvas>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-6 grid-margin grid-margin-lg-0 stretch-card">
                <div class="card">
                  <div class="card-body">
                    <h4 class="card-title">借阅人性别分析</h4>
                    <div class="doughnutjs-wrapper d-flex justify-content-center">
                      <canvas id="sex" style="height: 250px !important;"></canvas>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>

  
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="assets/vendors/js/vendor.bundle.base.js"></script>
    <script src="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page -->
    <script src="assets/vendors/chart.js/chart.umd.js"></script>
    <script src="assets/vendors/progressbar.js/progressbar.min.js"></script>
    <!-- End plugin js for this page -->
    <!-- inject:js -->
    <script src="assets/js/off-canvas.js"></script>
    <script src="assets/js/template.js"></script>
    <script src="assets/js/settings.js"></script>
    <script src="assets/js/hoverable-collapse.js"></script>
    <script src="assets/js/todolist.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="assets/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="assets/js/dashboard.js"></script>
    <!-- <script src="assets/js/Chart.roundedBarCharts.js"></script> -->
    <!-- End custom js for this page-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      //图书借阅情况分析模块
      // 获取对 canvas 元素的引用
      var ctx = document.getElementById('borrowinformation').getContext('2d');
      // 配置图表数据
      var data = {
        labels: ['已借出', '已归还'],
        datasets: [{
          data: [50, 50], 
          backgroundColor: [
            'rgba(255, 99, 132, 0.5)', // 已借的颜色
            'rgba(54, 162, 235, 0.5)', // 未借的颜色
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)', // 已借的边框颜色
            'rgba(54, 162, 235, 1)', // 未借的边框颜色
          ],
          borderWidth: 1
        }]
      };
      // 配置图表选项
      var options = {
        responsive: true,
        maintainAspectRatio: false,
      };
      // 创建环形图
      var borrowChart = new Chart(ctx, {
        type: 'doughnut',
        data: data,
        options: options
      });
      function updateBorrowInfo(bookName) {
      var url = 'http://localhost:8080/anlyze/borrowCount';
      // 构建带有查询参数的URL
      if (bookName && bookName !== '请选择图书') {
          url += '?bookName=' + encodeURIComponent(bookName);
      }
      console.log('Sending AJAX request...');
      $.ajax({
          url: url,
          method: 'GET',
          success: function(response) {
            // 根据返回的数据更新图表
            var borrowed = 0;
            var returned = 0;
            // 遍历返回的数组，统计借阅和归还数量
            response.forEach(function(borrow) {
                if (borrow.statue === 'borrowed') {
                    borrowed += borrow.count;
                } else if (borrow.statue === 'returned') {
                    returned += borrow.count;
                }
            });
            //更新文字数据
            document.getElementById('borrowed').innerText = borrowed;
            document.getElementById('returned').innerText = returned;
            // 更新图表的数据
            borrowChart.data.datasets[0].data = [borrowed, returned];
            // 重新绘制图表
            borrowChart.update()
          },
          error: function(error) {
              console.log('Error fetching data:', error);
          }
      });
      }
      function buttom() {
      // 当下拉菜单项被点击时
      $('.dropdown-item').click(function() {
          // 获取点击的项的文本内容
          var selectedText = $(this).text();
          // 将该文本内容设置为按钮的文本内容
          $('#dropdownMenuButton1').text(selectedText);
          // 更新借阅信息
          updateBorrowInfo(selectedText);
        });
      }


      //借阅人性别分析模块
      // 获取对 canvas 元素的引用
      var ctx = document.getElementById('sex').getContext('2d');
      // 配置图表数据
      var data = {
        labels: ['男', '女'],
        datasets: [{
          data: [50, 50], 
          backgroundColor: [
            'rgba(255, 99, 132, 0.5)', // 已借的颜色
            'rgba(54, 162, 235, 0.5)', // 未借的颜色
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)', // 已借的边框颜色
            'rgba(54, 162, 235, 1)', // 未借的边框颜色
          ],
          borderWidth: 1
        }]
      };
      // 配置图表选项
      var options = {
        responsive: true,
        maintainAspectRatio: false,
      };
      // 创建环形图
      var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: data,
        options: options
      });
      function updateSexInfo() {
      var url = 'http://localhost:8080/anlyze/sexCount';
      console.log('Sending AJAX request...');
      $.ajax({
          url: url,
          method: 'GET',
          success: function(response) {
            // 根据返回的数据更新图表
            var men = 0;
            var women = 0;
            // 遍历返回的数组，统计借阅和归还数量
            response.forEach(function(borrow) {
                if (borrow.statue === '男') {
                    men += borrow.count;
                } else if (borrow.statue === '女') {
                    women += borrow.count;
                }
            });
            // 更新图表的数据
            myDoughnutChart.data.datasets[0].data = [men, women];
            // 重新绘制图表
            myDoughnutChart.update();
          },
          error: function(error) {
              console.log('Error fetching data:', error);
          }
        });
      }


      //借阅周期分析模块
      // 获取对 canvas 元素的引用
      var ctx = document.getElementById('duration').getContext('2d');
      // 配置图表数据
      var data = {
        labels: ['小于7天', '7-15天', '15-30天'],
        datasets: [{
          label: '人数',
          data: [500, 500, 500], // 假设这是已归还的数据
          backgroundColor: [
            'rgba(255, 99, 132, 0.5)', // 第一个列的背景颜色
            'rgba(54, 162, 235, 0.5)', // 第二个列的背景颜色
            'rgba(255, 206, 86, 0.5)' // 第三个列的背景颜色
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)', // 第一个列的边框颜色
            'rgba(54, 162, 235, 1)', // 第二个列的边框颜色
            'rgba(255, 206, 86, 1)' // 第三个列的边框颜色
          ],
          borderWidth: 1
        }]
      };
      // 配置图表选项
      var options = {
        responsive: true,
        maintainAspectRatio: false,
      };
      // 创建柱状图
      var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: options
      });
      function updateDurationInfo() {
      var url = 'http://localhost:8080/anlyze/duration';
      console.log('Sending AJAX request...');
      $.ajax({
          url: url,
          method: 'GET',
          success: function(response) {
            numa= 0;
            numb= 0;
            numc= 0;
            // 根据返回的数据更新图表
            // 遍历返回的数组，统计借阅和归还数量
            response.forEach(function(borrow) {
                if (borrow.duration === '小于7天') {
                    numa += borrow.count;
                } else if (borrow.duration === '7-15天') {
                    numb += borrow.count;
                } else {
                    numc += borrow.count;
                }
            });
            // 更新图表的数据
            myBarChart.data.datasets[0].data = [numa, numb, numc];
            // 重新绘制图表
           myBarChart.update()
          },
          error: function(error) {
              console.log('Error fetching data:', error);
          }
        });
      }


      //受欢迎图书top5模块
      function updateTopBooks() {
        // 发送请求到后端获取数据
        fetch('http://localhost:8080/anlyze/topFiveBooks')
                .then(response => response.json())
                .then(data => {
                  // 更新表格数据
                  for (let i = 0; i < data.length; i++) {
                    // 更新 type
                    document.getElementById('book_' + (i + 1)).innerText = data[i].bookName;
                    // 更新 tcount
                    document.getElementById('bcount_' + (i + 1)).innerText = data[i].count;
                  }
                })
                .catch(error => {
                  console.error('Error fetching data:', error);
                });
      }

      //受欢迎类别top3
      function updateTopTypes() {
        // 发送请求到后端获取数据
        fetch('http://localhost:8080/anlyze/topThreeTypes')
                .then(response => response.json())
                .then(data => {
                  // 更新表格数据
                  for (let i = 0; i < data.length; i++) {
                    // 更新 type
                    document.getElementById('type_' + (i + 1)).innerText = data[i].type;
                    // 更新 tcount
                    document.getElementById('tcount_' + (i + 1)).innerText = data[i].count;
                  }
                })
                .catch(error => {
                  console.error('Error fetching data:', error);
                });
      }



      $(document).ready(function() {
        $(document).ready(function() {
          // 初始化按钮功能
          buttom();
          // 初始化借阅信息
          setTimeout(function() {
            updateBorrowInfo();
          }, 0);

          // 初始化性别信息
          setTimeout(function() {
            updateSexInfo();
          }, 5000);

          // 初始化周期信息
          setTimeout(function() {
            updateDurationInfo();
          }, 5000);
          // 受欢迎图书top5
          setTimeout(function() {
            updateTopBooks();
          }, 10000);

          // 受欢迎类别top3
          setTimeout(function() {
            updateTopTypes();
          }, 10000);
        });
      });



    </script>
  </body>
</html>